<template>
  <div id="myFans">
    <div v-if="fansList.length!=0" id="fansList">
        <div class="concernUnit" v-for="(item,index) in fansList" :key="item.id">
          <div class="unitLeft">
            <img :src="item.image|setAvatar" alt="">
            <div class="msg">
              <h3>{{item.companyName||item.universityName||item.studentName}}</h3>
              <p v-if="item.companyName">
                {{item.address}}-企业
              </p>
              <p v-else-if="item.universityName">
                {{item.address}}-高校-{{item.nature}}
              </p>
              <p v-else>
                {{item.address||'未填写'}}-学生-{{item.yearNum}}
              </p>
            </div>
          </div>
        </div>
    </div>
    <div v-else>
      <h2>空空如也</h2>
    </div>
  </div>
</template>

<script>
import {getConcernMine} from "@/api/user";

export default {
  name: "fans",
  data(){
    return{
      fansList:[]
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      let {uid,type}=this.$store.getters["user/getOther"]
      getConcernMine(type,uid).then(res=>{
        console.log(res)
        this.fansList=res.data.extend.concernList
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
#myFans
  width 70%
  height auto
  min-height 300px
  display flex
  justify-content center
  background-color white
#fansList
  width 68%
  min-height 400px
//#concernList
//  width 100%
//  display flex
//  flex-direction column
//  align-items center
.concernUnit
  margin 10px
  width 100%
  height 80px
  display flex
  justify-content space-between
  box-sizing border-box
  padding 10px
  transition box-shadow .2s
  border 1px solid #ead5d5
  cursor pointer
  &:hover
    box-shadow 0 0 3px gray

.unitLeft
  color fontColor
  height 100%
  width 40%
  justify-content space-between
  display flex
  & *
    margin 0

.unitLeft img
  height 100%
  width 60px
  border-radius 5px
.msg
  width 60%
  display flex
  flex-direction column
  justify-content space-between

.unitRight
  width 20%
  display flex
  justify-content center
  align-items center
</style>
